<template>
  <div>
    <div class="nav">
      <van-nav-bar
        title="安全中心"
        left-text="返回"
        @click-left="goback"
        left-arrow
      />
    </div>
    <div class="top"></div>
    <div class="password">
      <div class="password-item">
        <van-cell title="修改密码" @click="isOpen = true" is-link />
        <van-cell title="注销账号" @click="destroyAccount" is-link />
      </div>
    </div>
    <div class="btn-box">
      <van-button round block color="#0c34ba" @click="logout"
        >退出登录</van-button
      >
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="isOpen" position="bottom" closeable>
      <div class="password-box">
        <div class="password-title">修改密码</div>
        <div class="form-box">
          <van-field
            v-model="oldpassword"
            :type="isText ? 'text' : 'password'"
            label="旧密码"
            placeholder="旧密码(首字符必须为字母)"
            :right-icon="isText ? 'eye-o' : 'closed-eye'"
            @click-right-icon="toggleEye('isText')"
          />
          <van-field
            v-model="password"
            :type="isText1 ? 'text' : 'password'"
            label="新密码"
            placeholder="新密码(首字符必须为字母)"
            :right-icon="isText1 ? 'eye-o' : 'closed-eye'"
            @click-right-icon="toggleEye('isText1')"
          />
          <div class="btn-box">
            <van-button round block @click="updatePassword"
              >提&nbsp;&nbsp;&nbsp;交</van-button
            >
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "Security",
  data() {
    return {
      isOpen: false,
      //密码显示隐藏
      isText: false,
      isText1: false,
      oldpassword: "",
      password: "",
      userInfo: {},
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: this.$cookies.get("TOKEN"),
    };
  },
  created() {
    // this.updatePassword()
  },
  methods: {
    //注销账号
    destroyAccount() {
      this.$dialog
        .confirm({
          title: "注销账号",
          message: "是否确定注销账号, 一旦注销无法恢复!",
          confirmButtonColor: "#0c34ba",
        })
        .then(() => {
          let tokenString = this.$cookies.get("TOKEN");
          let str = `appkey=${this.appkey}&tokenString=${this.tokenString}`;
          if (!tokenString) return this.$router.push({ name: "Login" });
          this.axios({
            method: "post",
            url: "/destroyAccount",
            data: str,
          }).then((res) => {
            console.log("res destroyAccount==> ", res.data);
            this.$toast.clear();

            if (res.data.code === 700) {
              this.$toast({
                message: res.data.msg,
                forbidClick: true,
                duration: 500,
              });
              return this.$router.push({ name: "Login" });
            }
            if (res.data.code === "G001") {
              this.$toast({
                message: "注销账号成功",
                forbidClick: true,
                duration: 500,
              });
              return this.$router.push({ name: "Login" });
            } else {
              this.$toast({
                message: res.data.msg,
                forbidClick: true,
                duration: 500,
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //退出登录
    logout() {
      this.$dialog
        .confirm({
          title: "退出登录",
          message: "是否退出登录!",
          confirmButtonColor: "#0c34ba",
        })
        .then(() => {
          let tokenString = this.$cookies.get("TOKEN");
          let str = `appkey=${this.appkey}&tokenString=${this.tokenString}`;
          if (!tokenString) return this.$router.push({ name: "Login" });
          this.axios({
            method: "post",
            url: "/logout",
            data: str,
          })
            .then((res) => {
              this.$toast.clear();
              if (res.data.code === 700) {
                this.$toast({
                  message: res.data.msg,
                  forbidClick: true,
                  duration: 500,
                });
                return this.$router.push({ name: "Login" });
              }
              if (res.data.code === "F001") {
                this.$toast({
                  message: "退出登录成功",
                  forbidClick: true,
                  duration: 500,
                });
                return this.$router.push({ name: "Login" });
              }
            })
            .catch((err) => {
              console.log(err);
              this.$toast.clear();
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改密码
    updatePassword() {
      let tokenString = this.$cookies.get("TOKEN");
      if (!tokenString) return this.$router.push({ name: "Login" });
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      let str = `appkey=${this.appkey}&tokenString=${tokenString}&password=${this.password}&oldPassword=${this.oldpassword}`;
      this.axios({
        method: "post",
        url: "/updatePassword",
        data: str,
      })
        .then((res) => {
          console.log(str);
          console.log("res updatePassword==> ", res.data);
          this.$toast.clear();
          if (res.data.code === 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 500,
            });
            return this.$router.push({ name: "Login" });
          }
          if (res.data.code === "E001") {
            this.$toast({
              message: "密码修改成功, 请重新登录",
              forbidClick: true,
              duration: 500,
            });
            this.isOpen = false;
            this.$router.push({ name: "Login" });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$toast.clear();
        });
    },
    // 点击切换密码显示隐藏
    toggleEye(key) {
      this[key] = !this[key];
    },
    //返回上一级
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.btn-box {
  margin: 80px 10px 0;
}
/deep/.van-button--default {
  color: #fff;
  background-color: #0c34ba;
  border: 0.02667rem solid #0c34ba;
}
.btn-box {
  // margin: 80px 10px 0;
  padding: 15px;
}
/deep/ .van-cell {
  padding-left: 0px;
  padding-right: 0px;
}
.btn-box {
  margin: 30px 0 0px;
}
.password-box {
  padding: 15px;
}
.password-title {
  color: #666;
  margin-bottom: 30px;
  font-size: 16px;
}
/deep/.van-nav-bar .van-icon {
  color: #0c34ba;
}
/deep/.van-nav-bar__text {
  color: #0c34ba;
}
.top {
  width: 100%;
  height: 100px;
  background-color: #0c34ba;
}
.password {
  overflow: auto;
  padding: 15px;
  margin: 0 10px;
  background-color: #fcfafa;
  height: 180px;
  margin-top: -40px;
  border-radius: 10px 10px 0 0;
  transform: translateY(20px);
}
</style>